<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网</title>
    <meta
      name="description"
      content="携程旅行网是中国领先的在线旅行服务公司，旗下携程旅行向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅管理、为您的出行提供全方位旅行服务。"
    />
    <meta
      name="keywords"
      content="酒店预订,特价酒店,机票,机票预订,飞机票查询,航班查询,酒店团购,旅游度假,旅行,商旅管理,手机订酒店,手机订机票,携程旅行"
    />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"
    />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
  </head>
  <body>
    <div class="container">
      <!-- 顶部区域 -->
      <header>
        <input class="search" type="text" placeholder="搜索: 目的地/酒店/景点/航班号" />
        <a class="user" href="#">
          <img src="img/user.jpg" />
          <span>我的</span>
        </a>
      </header>
      <!-- 顶部区域 -->

      <!-- 内容区域 -->
      <article>
        <!-- 焦点图区域 -->
        <section class="focus">
          <img src="img/focus.jpg" />
          <ul class="dots">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="current"></li>
          </ul>
        </section>
        <!-- 焦点图区域 -->

        <!-- 导航区域 -->
        <nav>
          <a href="#">
            <em></em>
            景点·玩乐
          </a>
          <a href="#">
            <em></em>
            周边游
          </a>
          <a href="#">
            <em></em>
            美食林
          </a>
          <a href="#">
            <em></em>
            一日游
          </a>
          <a href="#">
            <em></em>
            当地攻略
          </a>
        </nav>
        <!-- 导航区域 -->

        <!-- 主体内容区域 -->
        <section class="main">
          <div class="box">
            <div class="item">
              <a href="#">酒店</a>
            </div>
            <div class="item">
              <a href="#">海外酒店</a>
              <a href="#">特价酒店</a>
            </div>
            <div class="item">
              <a href="#">团购</a>
              <a href="#">民宿·客栈</a>
            </div>
          </div>
          <div class="box">
            <div class="item">
              <a href="#">机票</a>
            </div>
            <div class="item">
              <a href="#">火车票</a>
              <a href="#">特价机票</a>
            </div>
            <div class="item">
              <a href="#">汽车票·船票</a>
              <a href="#">专车·租车</a>
            </div>
          </div>
          <div class="box">
            <div class="item">
              <a href="#">旅游</a>
            </div>
            <div class="item">
              <a href="#">门票</a>
              <a href="#">目的地攻略</a>
            </div>
            <div class="item">
              <a href="#">游轮旅游</a>
              <a href="#">定制旅行定制旅行定制旅行定制旅行定制旅行定制旅行</a>
            </div>
          </div>
        </section>
        <!-- 主体内容区域 -->

        <!-- 导航区域2 -->
        <nav>
          <ul class="nav2">
            <li>
              <a href="#"><i></i><span>WIFI电话卡</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>保险·签证</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>外币兑换</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>购物</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>当地向导</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>自由行</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>境外玩乐</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>礼品卡</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>信用卡</span></a>
            </li>
            <li>
              <a href="#"><i></i><span>更多</span></a>
            </li>
          </ul>
        </nav>
        <!-- 导航区域2 -->

        <!-- 展示区域2 -->
        <section class="show">
          <div class="up">
            <h3></h3>
            <a href="#">获取更多福利&gt;</a>
          </div>
          <ul class="down">
            <li>
              <a href="#"><img src="img/pic1.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="img/pic2.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="img/pic3.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="img/pic4.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="img/pic5.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="img/pic6.jpg" alt="" /></a>
            </li>
          </ul>
        </section>
        <!-- 展示区域2 -->
      </article>
      <!-- 内容区域 -->

      <!-- 底部区域 -->
      <footer>
        <ul class="footerbar">
          <li>
            <a href="#" class="active">
              <em class="iconfont icon-shouye"></em>
              <span>首页</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="iconfont icon-shequ-jihuo"></em>
              <span>社区</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="iconfont icon-xiaoxi"></em>
              <span>消息</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="iconfont icon-wode"></em>
              <span>我的</span>
            </a>
          </li>
        </ul>
      </footer>
      <!-- 底部区域 -->
    </div>
  </body>
</html>
